<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <!-- html 标签名 是忽略大小写的 -->
    <!-- <H1>AAA</H1>
    <h1>aaaa</h1> -->

    <div id="app">
        <p>驼峰组件名的使用</p>
        <!-- <HelloVue></HelloVue> -->
        <hello-vue></hello-vue>
        <p>组件定义的简写方式</p>
        <hello-word></hello-word>
        <p>组件的根标签定义</p>
        <element-root></element-root>
        <p>组件嵌套</p>
        <comp-a></comp-a>
    </div>
    <script>
        /*
            组件名称的描述规则
                1、vue官方建议，组件标签名因由多个单词组成（ 防止和已知的HTML标签产生覆盖冲突 ）
                2、在组件标签名设定时，可以使用驼峰规则定义标签名，但页面使用时需要将其转为 连字符 名称
                    例如：  HelloVue  =>  hello-vue
                3、组件定义组件默认值定规则可以是 Vue.extend 返回的构造函数，也可以是 和Vue.extend一样options配置对象
                4、组件定义时，页面模板必须满足有且仅有一个根元素的规则
                5、组件组件嵌套，避免出现死循环

        */
        Vue.component("HelloVue",Vue.extend({
            template:"<h5>HelloVue</h5>"
        }))
        Vue.component("HelloWord",{
            template:"<h5>HelloWord</h5>"
        })
        Vue.component("ElementRoot",{
            // template:`
            //     <h5>vue的自定义组件</h5>
            //     <h5>ElementRoot</h5>
            // `,
            template:`
                <div>
                    <h5>vue的自定义组件</h5>
                    <h5>ElementRoot</h5>
                </div>
            `
        })
        Vue.component("CompA", {
            template:`
                <div>
                    <p>CompA</p>
                    <comp-b></comp-b> 
                </div>
            `,
        })
        Vue.component("CompB",{
            // template:`
            //     <div>
            //         <p>CompB</p>
            //         <comp-a></comp-a>  
            //     </div>
            // `
            template:`
                <div>
                    <p>CompB</p>
                </div>
            `
        })

        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>